<template>
	<view class="uni-content">
		<match-media :min-width="690">
			<view class="login-logo">
				<image src="/static/logo.png"></image>
			</view>
			<text class="title title-box text-center text-h6 text-primary">大驾光临，蓬荜生辉</text>
		</match-media>
		<uni-forms ref="formRef" :value="单项" :rules="rules" validate-trigger="submit" err-show-type="toast">
			<uni-forms-item name="username" required>
				<uni-easyinput :inputBorder="false" :focus="focus.username" @blur="focus.username = false"
					class="input-box" placeholder="请输入用户名……简单点,下次输入方便" v-model="单项.username" trim="both"
					prefixIcon="auth" />
			</uni-forms-item>
			<uni-forms-item name="mobile" required>
				<uni-easyinput :inputBorder="false" :focus="focus.mobile" @blur="focus.mobile = false" class="input-box"
					placeholder="请输入 手机号" v-model="单项.mobile" trim="both" prefixIcon="phone" />
			</uni-forms-item>
			<uni-forms-item name="nickname">
				<uni-easyinput :inputBorder="false" :focus="focus.nickname" @blur="focus.nickname = false"
					class="input-box" placeholder="取个昵称……不取也可以" v-model="单项.nickname" trim="both"
					prefixIcon="personadd" />
			</uni-forms-item>
			<uni-forms-item name="password" v-model="单项.password" required>
				<uni-easyinput :inputBorder="false" :focus="focus.password" @blur="focus.password = false"
					class="input-box" maxlength="20" :placeholder="'请输入' + (config.passwordStrength == '最少三位' ? '3' : (config.passwordStrength == 'weak' ? '4' : '8')) +
	'-16位密码'" type="password" v-model="单项.password" trim="both" prefixIcon="locked" />
			</uni-forms-item>
			<uni-forms-item name="password2" v-model="单项.password2" required>
				<uni-easyinput :inputBorder="false" :focus="focus.password2" @blur="focus.password2 =false"
					class="input-box" placeholder="再次输入密码" maxlength="20" type="password" v-model="单项.password2"
					trim="both" prefixIcon="locked" />
			</uni-forms-item>
			<uni-forms-item>
				<a-captcha ref="captchaRef" scene="register" v-model="单项" />
			</uni-forms-item>
			<a-agreements scope="register" ref="agreementsRef" v-model="同意" ></a-agreements>
			<button class="uni-btn" type="primary" @click="submit">注册</button>
			<button @click="navigateBack" class="register-back">返回</button>
			<!-- 			<match-media :min-width="690">
				<view class="link-box">
					<text class="link" @click="registerByEmail">邮箱验证码注册</text>
					<text class="link" @click="toLogin">已有账号？点此登录</text>
				</view>
			</match-media> -->
		</uni-forms>
	</view>
</template>

<script setup>
	import { onShow, onReady } from '@dcloudio/uni-app';
	import { ref, reactive, nextTick } from 'vue';
	import rules from './validator.js';
	import config from '@/uni_modules/uni-id-pages/config.js';
	import use_user from "@/stores/use_user.js"
	const user = use_user()

	const { next } = defineProps({
		next: String
	})
	const 单项 = reactive({
		username: "",
		nickname: "",
		password: "",
		password2: "",
		captcha: ""
	});
	const captchaRef = ref();
	const formRef = ref();
	const agreementsRef = ref();
	const needAgreements = ref(true);
	const focus = reactive({
		username: false,
		nickname: false,
		password: false,
		password2: false,
		captcha: false
	});
	const 同意 = ref(false);

	onReady(() => {
		formRef.value.setRules(rules);
	});

	// 在 onShow 生命周期钩子中绑定回车键事件
	onShow(() => {
		// #ifdef H5
		document.onkeydown = event => {
			const e = event || window.event;
			if (e && e.keyCode === 13) { // 回车键的键值为13
				submit();
			}
		};
		// #endif
	});

	const submit = async () => {
		try {
			const res = await formRef.value.validate();
			if (!单项.captcha) {
				captchaRef.value.focusCaptchaInput = true;
				return uni.showToast({
					title: '请输入验证码',
					icon: 'none',
					duration: 3000
				});
			}
			if (needAgreements.value && !同意.value) {
				return agreementsRef.value.popup();
			}
			注册();
		} catch (errors) {
			console.log('errors: ', errors);
			let key = errors[0].key;
			// key = key.replace(key[0], key[0].toUpperCase());
			focus[key] = true
			// this['focus' + key] = true;
		}
	};

	const 注册 = async () => {
		const res = await user.注册(单项, next)
		if (res.code == 0) {
			user.登录(单项, next, false)
		} else {
			captchaRef.value.getImageCaptcha()
		}
	};
	// 返回上一页方法
	const navigateBack = () => {
		uni.navigateBack();
	};

	// 跳转到密码登录页面方法
	const toLogin = () => {
		uni.navigateTo({
			url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
		});
	};

	// 跳转到邮箱注册页面方法
	const registerByEmail = () => {
		uni.navigateTo({
			url: '/uni_modules/uni-id-pages/pages/register/register-by-email'
		});
	};
</script>
<style lang="scss" scoped>
	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	@media screen and (max-width: 690px) {
		.uni-content {
			margin-top: 15px;
			height: 100%;
			background-color: #fff;
		}
	}

	@media screen and (min-width: 690px) {
		.uni-content {
			padding: 30px 40px 60px;
			max-height: 530px;
		}

		.link-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: space-between;
			margin-top: 10px;
		}

		.link {
			font-size: 12px;
		}
	}

	.uni-content ::v-deep .uni-forms-item__label {
		position: absolute;
		left: -15px;
	}

	button {
		margin-top: 15px;
	}
</style>